<template>
	<div class="page">
		<div class="header">
			<div class="header-con">
				<div class="header-back">
					<router-link to="/mines">
						<span class="back">
							<i class="iconfont">&#xe604;</i> back
						</span>
					</router-link>
				</div>
				<div class="header-title">Select</div>
				<div class="header-mines">
					<!-- <i class="iconfont">&#xe633;</i>
					<span v-html="this.computeFlags"></span> -->
				</div>
			</div>
		</div>
		<div class="select-body">
			<ul>
				<li>
					<router-link to="/play/novice">Novice</router-link>
				</li>
				<li>
					<router-link to="/play/intermediate">Intermediate</router-link>
				</li>
				<li>
					<router-link to="/play/expert">Expert</router-link>
				</li>
				<!-- <li>
					<router-link to="/custom">Customize</router-link>
				</li> -->
			</ul>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
	export default {
		name: "Select",
		data() {
			return {};
		},
		components: {}
	};
</script>

<style scoped lang="scss" scoped>
	.page{
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		.header,.footer{
			width: inherit;
			height: 40px;
			border:1px solid #48525a;
			border-left:none;
			border-right: none;
			color: azure;
		}
		/*页头部样式*/
		.header-con{
			width: 100%;height: inherit;
			display: flex;
			flex-direction: row;
			.header-back,.header-mines{
				width:60px;height: inherit;
				padding: 0 5px;
				display: flex;
				justify-content: center;align-items: center;
			}
			.back{
				display: flex;
				flex-direction: row;justify-content: center;align-items: center;
				padding: 2px 5px;
				border-radius: 2px;
				background: #545159;
				cursor: pointer;
				color: #fbfbfb;
				>i{
					color: #29f5a6;
				}
			}
			.header-mines{
				>i{
					color: #35e5fb;
				}
				>span{
					margin-left: 5px;
				}
			}
			.header-title{
				height: inherit;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.select-body{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			>ul{
				width: 70%;
				>li{
					width: 80%;
					height: 40px;
					line-height: 40px;
					text-align: center;
					margin: 10px auto;
					border-radius: 5px;
					overflow: hidden;
					transition: all 0.3s;
					background: rgba(0,0,0,0);
					&:active,&:hover{
						background: rgba(0,0,0,0.5)
					}
					>a{
						display: block;
						height: 100%;width: 100%;
						color: #dadada;
					}
				}
			}
		}
	}
</style>
